<script setup>
/**
 * 无极悬浮菜单
 * @Author Mumu xinglinhe@qq.com
 * @Date 2022/8/15
 */
import { useMouse, useVModel } from '@vueuse/core';
import { watchEffect } from 'vue';
import { ref } from 'vue';
const emits = defineEmits(['update:show','action']);
const props = defineProps({
	show:Boolean,//是否显示
	e:{
		type:Object,
		default:()=>{},
	},// 事件 主要是获取坐标
	autoMouse:Boolean,//是否自动获取鼠标坐标
	list:{
		type:Array,
		required:true,
	},//选项菜单
	width:String,//宽度
})
const {x,y} = useMouse()
const useAutoX = ref(0),useAutoY = ref(0);
const show = useVModel(props,'show',emits);
//样式
const styles = ref({
    top:0,
	left:0,
	// width:'150px' //后续有需要再扩展样式接收
})
//计算样式
function setStyle(){
	styles.value.width=props.width||null;
	if(props.autoMouse){
		styles.value.left=useAutoX.value+'px';
		styles.value.top=useAutoY.value+'px';
	}else{
		styles.value.left=props.e.clientX+'px';
		styles.value.top=props.e.clientY+'px';
	}
}
watchEffect(setStyle)//自动计算样式
const udata = ref(null);//用户数据透传
function toShow(bool,datas=null){
	udata.value=datas;
	show.value=bool;
	if(props.autoMouse){
		useAutoX.value=x.value;
		useAutoY.value=y.value;
	}
}//处理显示隐藏

defineExpose({
    toShow,
})
</script>
<template>
	<teleport to="#teleported">
		<div v-if="show">
			<div class="listbox mp-4" :style="styles">
				<div
					class="flex item mp-5 cursor"
					v-for="(v,k) in list"
					:key="k"
					@hover="emits('action',{event:'hover',item:v},udata)"
					@click="emits('action',{event:'click',item:v},udata)"
				>
					<i :class="['icon',v.icon]" class="mp-r-5"></i>
					<div class="name flex1">{{ v.name }}</div>
					<i :class="[v.iconRight,'ricon']"></i>
				</div>
			</div>
			<div class="mask" @mousedown="emits('update:show',false)" style="opacity:0.0"></div>
		</div>
	</teleport>
</template>

<style lang="less" scoped>
.listbox{
	position: fixed;
	border: 1px solid #cacbcb88;
	border-radius: 3px;
	background: #fafbfc;
	box-shadow: 0 4px 16px rgba(0,0,0,.5);
	z-index: 999;
	min-width: 100px;
	.item{
		line-height: 20px;
		.ricon{
			font-size: 12px;
		}
		&:hover{
			background: #eee;
		}
	}
}
</style>